<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>超级二维码</title>
  <meta name="format-detection" content="telephone = no" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <section id="wrap">
    <script type="text/javascript">
      function autoTextarea() {
        //  this.style.height = this.scrollTop +this.offsetHeight-36+ "px";
      }
    </script>
    <header>
      <div class="super">
        <figure>
          <img src="images/logo.png" alt="超级二维码">
          <figcaption>
            <div class="slogo">超级二维码</div>
            <div class="yiqi">17p.me</div>
          </figcaption>
        </figure>
        <div class="">
          <img src="images/face.png" alt="超级二维码">
        </div>
      </div>
    </header>
    <div class="nav">
      <ul>
        <li class="on"><a href="javascript:;">网址</a></li>
        <li><a href="javascript:;">图片</a></li>
        <li><a href="javascript:;">视频</a></li>
        <li><a href="javascript:;">文件</a></li>
        <li><a href="javascript:;">名片</a></li>
        <li><a href="javascript:;">名字</a></li>
      </ul>
    </div>
    <div class="address">
      <textarea type="text"  rows="1" cols="20" onpropertychange="autoTextarea.call(this)" oninput="autoTextarea.call(this)" placeholder='http://' name='text' class="u-id">http://wwww.baidu.com/</textarea>
      <a href="javascript:;" class="click-creat" id="clickCreat">生成二维码</a>
    </div>
    <div class="code">
      <div class="pic">
        <div class="bg"><span>输入网址<br>点击生成二维码</span></div>
        <img src="images/erweima.png" alt="超级二维码" id="qrCode">
      </div>
      <div class="erweima">
        <!-- <a href="javascript:;" class='download' onclick="savepic.call(this,this.getAttribute('href'));return false;" style="cursor:hand" download="qrcode">下载二维码</a> -->
        <!-- <a href="javascript:;" class='download' style="cursor:hand" download="qrcode" onclick='downloadFile.call(this,this.getAttributte('href'))'>下载二维码</a> -->
        <a href="javascript:;" class='download' style="cursor:hand" download="qrcode" >下载二维码</a>

        <a href="javascript:;" class="share-button">分享二维码</a>
      </div>
    </div>
    <button class="put-code-into-img">将二维码放入图片</button>
    <footer>艺旗科技出品</footer>
    <div class="collection">
      <div class="collection-content">
        <div class="icons">
          <a href="javascript:;" class="collection-icon">
            <figure>
              <img src="images/collection.png" alt="超级二维码">
              <figcaption>收藏</figcaption>
            </figure>
          </a>
          <a href="javascript:;" class="save-icon">
            <figure>
              <img src="images/save.png" alt="超级二维码">
              <figcaption>保存到桌面</figcaption>
            </figure>
          </a>
        </div>
        <div class="cancle"><a href="javascript:;" class="cancle-button">取消</a></div>

      </div>

    </div>
    <div class="share">
      <div class="share-content">
        <!-- JiaThis Button BEGIN -->
        <div class="jiathis_style_32x32">
          <a class="jiathis_button_weixin btn-share  share-wechat"></a>
          <i></i>

          <a class="jiathis_button_tsina btn-share share-tsina"></a>
          <a class="jiathis_button_cqq btn-share share-cqq" ></a>
          <a class="jiathis_button_qzone btn-share share-qzone"></a>
          <!--<a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank"></a>-->
          <!--<a class="jiathis_counter_style"></a>-->
        </div>
        <script type="text/javascript">

          var jiathis_config = {
            summary: "",
            shortUrl: false,
            hideMore: true
          }
        </script>
        <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
        <!-- JiaThis Button END -->

      </div>
    </div>
  </section>
  <script src='js/jquery-1.11.3.min.js'></script>
  <script>
  function downloadFile(fileName, content){
    var aLink = document.createElement('a');
    var blob = new Blob([content]);
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(evt);
}
  function savepic(href) {
              if (document.all.a1 == null) {
                  objIframe = document.createElement("IFRAME");
                  document.body.insertBefore(objIframe);
                  objIframe.outerHTML = "<iframe name=a1 id=a1 src=" + href + "></iframe>";
                  re = setTimeout("savepic()", 1)
              }
              else {
                  clearTimeout(re)
                  pic = window.open(href, "a1")
                  pic.document.execCommand("SaveAs")
                  document.all.a1.removeNode(true)
              }
          }
    $(function() {
      var array = [];
      $('#clickCreat').on('click', function() {
        if ($('.u-id').val() != "" && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test($('.u-id').val())) {
          alert("格式正确，正在去数据查询是否重复....");
          $.ajax({
            type: 'post',
            url: 'data.json',
            data: {
              url: $('.u-id').val()
            },
            dataType: 'json',
            success: function(data) {
              array.push(data);
              console.log(array);
              $('.bg').css('display', 'none');
              $('#qrCode').attr('src', data.qr_img);
              $('.download').attr('href',data.qr_img);
              $('#qrCode').css({
                'display': 'block'
              })
            },
            error: function() {
              alert('啊哦，页面出错');
            }
          });

        } else {
          alert("URL 格式不正确");
        }
      });
      $('.download').on('click', function(e) {
        if (!($('#qrCode:visible').length)) return false;


      });
      $('.share-button').on('click', function(e) {
        if (!($('#qrCode:visible').length)) return false;
      });
      $('.put-code-into-img').on('click', function(e) {
        if (!($('#qrCode:visible').length)) return false;
      });
      // $('.jiathis_style_32x32 .jtico').css({'width':'70px!important','height':'70px!important',"background-image":url('../images/weixin.png'),'background-repeat':'no-repeat'});

    });
  </script>
</body>

</html>
